<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-col :span="3">
        <el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
    </el-col>
    <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="登录账号" :label-width="formLabelWidth" prop="empName">
            <el-input v-model="form.loginName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth" prop="sex">
            <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户类型(0代表系统用户)">
            <el-select v-model="form.userType" placeholder="请选择用户类型">
                <el-option label="系统用户" value="0"></el-option>
                <el-option label="其他用户" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth" prop="province">
            <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth" prop="hireDate">
            <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户性别(0男1女)">
            <el-select v-model="form.sex" placeholder="请选择用户性别">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="头像路径" :label-width="formLabelWidth" prop="salary">
            <el-input v-model="form.avatar" autocomplete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">-->
<!--            <el-input v-model="form.password" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="盐加密" :label-width="formLabelWidth" prop="password">-->
<!--            <el-input v-model="form.salt" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="账号状态(0正常,1停用)">
            <el-select v-model="form.status" placeholder="请选择账号状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="删除标志(0存在,2删除)">
            <el-select v-model="form.delFlag" placeholder="请选择账号状态">
                <el-option label="存在" value="0"></el-option>
                <el-option label="删除" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="password">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <el-button type="primary" size="mini" @click="addOrUpdate">保存修改</el-button>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                //表格数据
                tableData: [],//返回的查询数据
                checkedRoles: [],  //默认选中的角色
                roleList: [], //有效角色集合
                roleIds: "",//定义所有中的所选角色id集合
                isIndeterminate: true,
                tempUserId: 0, //用户id
                form: {
                    loginName: '',
                    userName: '',
                    userType: '',
                    email: '',
                    phonenumber: '',
                    sex: '',
                    avatar: '',
                    password: '',
                    salt: '',
                    status: '',
                    delFlag: '',
                    remark: '',
                },
                //弹出框的宽度
                formLabelWidth: '120px',
                rules: {
                    // empName: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
                    // province: [{required: true, message: '请输入部门位置', trigger: 'blur'}],
                }
            }
        },
        //加载时默认执行的方法
        created: function () {
            //调用封装的方法
            this.loadData();
            //获取用户登录后的信息
            var _this = this;
            axios.get('/user/getLoginSession')
                .then(function (response) {
                    if (response.data.code == 200) {
                        _this.form = response.data.data;
                    }
                });

        },
        methods: {
            //定义变量_this等于外面的this
            //封装请求数据的方法
            loadData() {
                var _this = this;
                axios.post('/user/getLoginSession', {})
                    .then(function (response) {
                        console.log(response);
                        //判断是否执行成功
                        if (response.data.code == 200) {
                            _this.form = response.data.data;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //获取性别状态 把状态数字,转换成字符
            getStatus(row, column, cellValue, index) {
                //cellValue   status的值
                /* var returnValue = '';
                 if(cellValue==1){
                     returnValue= "启用";
                 }else{
                     returnValue= "禁用";
                 }
                 return returnValue;*/
                return cellValue == 0 ? "系统用户" : "游客用户";
            },
            //刷新
            refresh() {
                //原始js重新请求
                location.reload();

            },
            //用户更新的方法
            handleEdit(index, row) {
                console.log(index, row);
                //给用户赋值
                this.title = '用户更新';
                //点击查询携带数据
                this.form = row;
            },
            //实现用户添加或者更新
            addOrUpdate() {
                var uri = "/user/update";
                var _this = this;
                axios.post(uri, this.form)
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            _this.loadData();
                        } else {
                            _this.$message("操作失败")
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                // logout 做销毁session操作
                axios.post('/user/logout')  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        location.href = "login.html";
                    })
            },
        }
    })
</script>
</body>
</html>